<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header flexAic">
          <span>收款钱包</span>

          <el-tooltip class="box-item" effect="dark" placement="bottom">
            <template #content>
              收款钱包记录了各类订单的收入与支出，其中专家后台与小程序的订单收益
              <br />
              会流入“自营钱包”；可被提现，自营钱包的收入仅做记录不可提现。
              <br />
            </template>
            <img
              style="width: 20px; margin-left: 10px"
              src="https://b.gaokaow.cc/question@2x.png"
              alt=""
            />
          </el-tooltip>
          <div class="ml20 cBlue fz14 curr" @click="toWithdraw">
            去提现
            <el-icon style="vertical-align: middle"
              ><ArrowRightBold style="width: 20px; height: 20px"
            /></el-icon>
          </div>
        </div>
      </template>
      <navTop
        :title="title"
        :dataList="list"
        :menuList="menuList"
        @menuBtn="menuBtn"
        @yearChange="yearChange"
      ></navTop>
      <div class="chart-box">
        <div class="myChart">
          <div id="myChart" style="width: 100%; height: 300px">
            <EChartWrapper :type="'line'" :options="lineChartOptions" />
          </div>
        </div>
      </div>
    </el-card>
    <bottom
      :loading="loading"
      title="收款"
      :tableData="tableData"
      @serchSelect="handleSeach"
      :params="tableConfig"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
      @sort="sort"
    ></bottom>
  </div>
</template>

<script setup>
import EChartWrapper from '@/components/ECharts';
import * as echarts from 'echarts';
import { useRouter } from 'vue-router';
import navTop from '../components/nav.vue';
import bottom from '../components/bottom.vue';
import { getMoneyLogList, incomeApi } from '@/api/money/moneyLog';
import { onMounted } from 'vue';
const router = useRouter();
const tableData = ref([]);
const title = ref('收入概览');
const lineData = ref([]);
const list = ref([]);
const loading = ref(false);
const params = ref({
  page: 1,
  pageSize: 20,
  type: 1, //1 收入   2 支出
  dateType: -1,
  year: new Date().getFullYear(),
  moneyType: '',
  walletType: 2,
});
const tableConfig = ref({
  page: 1,
  pageSize: 20,
  total: null,
  walletType: 2,
});
const menuList = ref([
  {
    type: 2,
    label: '支出概览',
  },
  {
    type: 1,
    label: '收入概览',
  },
]);
const dataList = ref([
  { name: '收入总计', money: '' },
  { name: '志愿VIP', money: '' },
  { name: '升学VIP', money: '' },
  { name: '志愿填报', money: '' },
]);
const incomeData = ref([
  { name: '收入总计', money: '' },
  { name: '提现', money: '' },
  { name: '充值', money: '' },
  { name: '钱包退款', money: '' },
]);
//排序
const sort = (val) => {
  loading.value = true;
  tableConfig.value.sort = val.sort;
  tableDataList();
};
const toWithdraw = () => {
  router.push({
    path: '/financialMan/withdraw',
  });
};
const sizeChange = (val) => {
  loading.value = true;
  tableConfig.value.pageSize = val;
  tableDataList();
};
const currentChange = (val) => {
  loading.value = true;
  tableConfig.value.page = val;
  tableDataList();
};
// 格式转换
const formatCurrency = (num) => {
  const cleanedNum = Number(num ? num.toString().replace(/,/g, '') : '');
  return new Intl.NumberFormat('en-US', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(cleanedNum);
};

const incomeInti = () => {
  incomeApi(params.value).then(({ data }) => {
    lineData.value = data.financeStatPic;

    // 格式化后的金额数组
    const formattedData = [
      formatCurrency(data.total),
      formatCurrency(data.zhiYuanKa),
      formatCurrency(data.shengXueKa),
      formatCurrency(data.zhiYuanTianBao),
    ];

    // 根据 type 的值决定更新哪个数据列表
    const targetList =
      params.value.type === 1 ? dataList.value : incomeData.value;

    // 更新对应的目标数据列表
    formattedData.forEach((value, index) => {
      if (index < targetList.length) {
        targetList[index].money = value.toString();
      }
    });

    // 如果 type 不是 1，则更新 dataList.value
    list.value = params.value.type !== 1 ? incomeData.value : dataList.value;
    // if (params.value.type !== 1) {
    //   aaa.value = incomeData.value
    //   // dataList.value = incomeData.value;
    // }
  });
};
const menuBtn = (val) => {
  params.value.type = val.value.type;

  incomeInti();
};
const yearChange = (e) => {
  params.value.dateType = e.dateType;
  params.value.year = e.year;
  params.value.type = e.type ? e.type : params.value.type;
  params.value.moneyType = e.moneyType;
  incomeInti();
};
const tableDataList = () => {
  getMoneyLogList(tableConfig.value).then((res) => {
    const { data } = res;
    tableData.value = data.data;
    tableConfig.value.total = data.total;
    loading.value = false;
  });
};
const handleSeach = (val) => {
  loading.value = true;
  tableConfig.value = val;
  tableDataList();
};
const lineChartOptions = ref({
  title: [
    {
      // 标题
      text: computed(() =>
        params.value.type == 1 ? '营业收入(元)' : '营业支出(元)'
      ),
    },
  ],
  xAxis: {
    type: 'category',
    data: computed(() => lineData.value.times),
    //刻度相关配置：
    axisTick: {
      show: false, //去掉刻度
    },
    axisLine: {
      lineStyle: {
        color: 'rgb(229,230,235)', // X轴线的颜色
        width: 2, // X轴线的宽度
      },
    },
    //轴
    axisLabel: {
      formatter: '{value}', // 显示单位为 "w"
    },
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      var value = params[0].value;
      var color = value ? 'rgb(40,90,250)' : ''; // 根据数据值设置字体颜色
      var p = `<p>${params[0].axisValue} 营业收入（元）</p>`;
      return p + '<span style="color:' + color + '">' + value + '</span>';
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: function (value) {
        return value >= 10000 ? (value / 10000).toFixed(1) : value; // 将超过10000的值转化为"w"单位
      },
      color: 'rgb(229,230,235)', // y轴线的颜色
    },
  },
  series: [
    {
      type: 'line',
      smooth: true,
      data: computed(() => lineData.value.money),
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(90, 177, 239, 0.5)' },
          { offset: 1, color: 'rgba(90, 177, 239, 0)' },
        ]),
      },
    },
  ],
});
onMounted(() => {
  tableDataList();
  incomeInti();
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
.flexAic {
  display: flex;
  align-items: center;
}
.jcsb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cBlue {
  color: $light-blue;
}
.fz14 {
  font-size: 14px;
  font-weight: normal;
}

.cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  .cardItem {
    padding: 20px 0 20px 34px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 93px;
    background: #fafafa;
    border-radius: 4px 4px 4px 4px;
    margin-left: 1.29%;
    p:first-child {
      font-size: 14px;
      color: #4e5969;
    }
    p:last-child {
      font-size: 18px;
      font-weight: 600;
      color: #4e5969;
      line-height: 23px;
    }
    .fz12 {
      font-size: 12px;
    }
  }
}
</style>
